<template>
  <div id="app">
    <div>
      <el-menu  class="el-menu-demo" mode="horizontal">
      <el-row >
        <el-col :span="4"> <el-menu-item  @click="$router.push('/')"><font  style="font-size: 24px; color: #3399ff">氪媒体</font></el-menu-item></el-col>
        <el-col :span="2"><el-menu-item  @click="$router.push('/article1')"><font style="font-size: 20px; color: black">资讯</font></el-menu-item></el-col>
        <el-col :span="2"><el-menu-item  @click="$router.push('/video1')"><font style="font-size: 20px; color: black">视频</font></el-menu-item><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="2"><el-menu-item  @click="$router.push('/shop')"><font style="font-size: 20px; color: black">商城</font></el-menu-item><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="2"><el-menu-item ><el-button type="primary" round @click="$router.push('/articleAdd')">投稿</el-button></el-menu-item></el-col>
        <el-col :span="2"><el-menu-item ><el-button type="primary" round @click="$router.push('/videoAdd')">上传视频</el-button></el-menu-item></el-col>
        <el-col :span="4">
          <el-menu-item ><el-input v-model="input1" placeholder="请输入内容"></el-input></el-menu-item>

        </el-col>
        <el-col :span="2">
          <el-menu-item ><el-button type="primary" @click="look" round>搜索</el-button></el-menu-item>
        </el-col>

        <el-col :span="1">
          <el-menu-item v-if="flag">
            <router-link to="/login"><font style="font-size: 20px; color: black">登录</font></router-link>
          </el-menu-item>
          <el-menu-item v-if="reflag">
           <font style="font-size: 20px; color: black">{{username}}</font>
          </el-menu-item>
        </el-col>
        <el-col :span="1">
          <el-menu-item v-if="flag">
            <router-link to="/registry"><font style="font-size: 20px; color: black">注册</font></router-link>
          </el-menu-item>
          <el-menu-item v-if="reflag">
            <font style="font-size: 20px; color: black" > /</font>
            <font style="font-size: 20px; color: black" @click="exitLogin">退出</font>
          </el-menu-item>
        </el-col>
      </el-row>
    </el-menu>
    </div>
    <router-view/>
  </div>
</template>

<script>
  import vueCookie from 'vue-cookie';
  import axios from 'axios';
export default {
  name: 'App',
  data(){
    return{
      input1:'',
      flag:true,
      reflag:false,
      username:''
    }
  },
  methods:{
    look(){
      this.$router.push({name:"look",params:{word:this.input1}});
    },
    verify(){
      var token =vueCookie.get("token");
      if(token!=null){
        this.flag=false;
        this.reflag=true;
        axios.post("http://localhost:8088/user/findUser").then(res=>{
          if(res.data.code==0){
            var user =JSON.parse(res.data.data);
            this.username=user.username;
          }
        })
      }else{
        this.flag=true;
        this.reflag=false;
      }
    },
    exitLogin(){
      vueCookie.delete("token");
    }
  },
  mounted() {
    this.verify();
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0px;
}
</style>
